<template>
  <div class="div_contain">  
      <div class="div_content">
        <div>
            设备状态：{{status}}
           <div :class="RefreshColor()" />
        </div>
         
        <div> 累计能耗：{{total}}</div>
        <div> 产 量：{{chanlaing}}</div>
      </div>
     <div class="div_title">{{title}}</div>
  </div>
</template>

<script>
export default {
 data () {
    return {
      title: '等离子',
      status: '运行中',
      total:'1111',
       chanlaing:'11',
      alarm:1
    }
 },
 methods: {
   RefreshData(status1,total1,chanliang1,alarm1){
      this.status =status1;
      this.total =total1;
      this.chanlaing =chanliang1;
      this.alarm =alarm1;
      this.RefreshColor()
   },
   RefreshColor(){
     switch(this.alarm){
       case 0:return 'bgred'; //故障
       case 1:return 'bggreen'; //运行中
       case 2:return 'bgyellow'; //停机
       case 3:return 'bggray'; //离线
     }
   }
 }
}
</script>

<style lang="scss" scoped>
.div_contain{
  margin-top: 5px;
}
.div_title{
  text-align: center;
  font-size: 20px;
}
.div_content {
  border-radius: 15px;
  border: 1px solid rgb(0, 217, 255) ;
  padding:0px 0px 0px 10px;
  font-size: 13px;
}
.bgred{
   width: 16px;
  height: 16px;
  border-radius: 50%;
  float: right;
  margin-right: 15px;
  background-color:red
}
.bggreen{
   width: 16px;
  height: 16px;
  border-radius: 50%;
  float: right;
  margin-right: 15px;
  background-color:#67C23A
}
.bgyellow{
   width: 16px;
  height: 16px;
  border-radius: 50%;
  float: right;
  margin-right: 15px;
   background-color:yellow
}
.bggray{
   width: 16px;
  height: 16px;
  border-radius: 50%;
  float: right;
  margin-right: 15px;
  background-color:gray
}
</style>